import React from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin'

import './style.less'

class Item extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
        this.state={
            commentState:2//控制按钮的状态（已评价(2)，未评价(0)，正在评价(1)）
        } 
    }
    render() {
        let {data,submitComment} = this.props;
        let {commentState} = this.state;
        return (
            <div className="clear-fix order-item-container">
                <div className="order-item-img float-left">
                    <img src={data.img}/>
                </div>
                <div className="order-item-comment float-right">
                   {
                        commentState===0
                        //未评价 
                        ?<button className="btn" onClick={this.showCommet.bind(this)}>评价</button>
                        :
                        commentState ===1
                        //评价中
                        ? ''
                        //都不是则为已评价
                        :<button className="btn unseleted-btn">已评价</button>
                   }
                </div>
                <div className="order-item-content">
                    <span>商户：{data.title}</span>
                    <span>数量：{data.count}</span>
                    <span>价格：￥{data.price}</span>
                </div>
                { // “评价中”才会显示输入框
                         commentState ===1 ?
                         <div className="comment-text-container">
                            <textarea 
                                style={{width: '100%', height: '80px'}} 
                                className="comment-text" 
                                ref="commentText">
                            </textarea>
                            <button 
                                className="btn"
                                onClick ={this.submitClickHandle.bind(this)}
                                >提交</button>
                            <button 
                                className="btn unseleted-btn"
                                onClick={this.hideComment.bind(this)}
                            >取消</button>
                         </div>
                         :''
                }
            </div>
        )
    }
    //是否评价了从后端传入，更改状态
    componentDidMount() {
        this.setState({
            commentState:this.props.data.commentState 
        });
    }
    //点击‘评价’显示评论框
    showCommet(){
        this.setState({
            commentState:1 
        });
    }
    //点击‘取消’隐藏评论框
    hideComment(){
        this.setState({
            commentState:0 
        });
    }
    //点击提交 提交评论
    submitClickHandle(){
        let {submitComment} = this.props;
        //获取商户ID，评论信息value
        const id = this.props.data.id;
        const comenetTextDom = this.refs.commentText;
        const value = comenetTextDom.value.trim();
        if(!value){
            return
        }
        //提交评论内容
        submitComment(id,value,this.commentOk.bind(this))
    }
    //评论成功的回调函数
    commentOk(){
        //已经评价，修改状态
        this.setState({
            commentState:2 
        });
    }
}
export default Item